<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        #tips {
            background-color: grey;
            line-height: 45px;
        }

        .list {
            padding: 10px 0;
            background-color: #f1f1f1;
        }

        .list li {
            height: 32px;
            line-height: 32px;
            border: 1px dashed #333;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <h3 id="tips">模拟封装jquery</h3>
        <div class="list">
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li>06</li>
        </div>
    </div>
</body>
<script>
    // jquery  原生js封装的一个js库 (获取元素 操作元素 绑定事件)
    // 模拟jquery
    // 1. 练习构造函数的封装
    // 2. 预习jquery

    // html()
    // width()
    // hide()

    // 单元素  => 直接操作
    // var h2 = document.querySelector("#tips");  //单元素  如果有多个默认返回第一个
    // h2.innerHTML = "hello";


    // 多元素 => 遍历集合中每一个元素 操作
    // var liList = document.querySelectorAll(".list li");  // 多元素  即便是一个也会放到集合中
    // for (var i = 0; i < liList.length; i++) {
    //     var ele = liList[i];
    //     ele.innerHTML = "world";
    // }


    // 直接用document.querySelectAll()   把获取的元素统一放到集合中  遍历处理
    // var eles = document.querySelectorAll("#tips");  // 多元素  即便是一个也会放到集合中
    // var eles = document.querySelectorAll(".list li");  // 多元素  即便是一个也会放到集合中
    // 设置html
    // for (var i = 0; i < eles.length; i++) {
    //     var ele = eles[i];
    //     ele.innerHTML = "world";
    // }

    // 获取
    // eles[0].innerHTML 

    function GetEle(selector) {  //接收一个字符串 作为选择器(css选择器)
        // {}
        // this -> {}

        this.eles = document.querySelectorAll(selector);


        // this.__proto__ = GetEle.prototype;
        // return this;

    }


    // html()   获取和设置html
    // html(123123)   有参数就设置
    // html()         没有参数就获取
    GetEle.prototype.html = function (con) {
        // this => 调用此方法的实例化对象   => 也可以使用each
        // arguments 实际参数的集合
        if (arguments.length >= 1) {  //有参数就设置

            this.each(function (i, ele) {
                ele.innerHTML = con;
            })

            // for (var i = 0; i < this.eles.length; i++) {
            //     var ele = this.eles[i];
            //     ele.innerHTML = con;
            // }
        } else {  //没有参数就获取 (默认返回第一个)
            return this.eles[0].innerHTML;
        }
    }

    // text()   获取和设置text
    // text(123123)   有参数就设置
    // text()         没有参数就获取
    GetEle.prototype.text = function (con) {
        // this => 调用此方法的实例化对象
        // arguments 实际参数的集合
        if (arguments.length >= 1) {  //有参数就设置
            this.each(function (i, ele) {
                ele.innerText = con;
            })
            // for (var i = 0; i < this.eles.length; i++) {
            //     var ele = this.eles[i];
            //     ele.innerText = con;
            // }
        } else {  //没有参数就获取 (默认返回第一个)
            return this.eles[0].innerText;
        }
    }

    // val()   获取和设置value值
    // val(123123)   有参数就设置
    // val()         没有参数就获取
    GetEle.prototype.val = function (con) {
        // this => 调用此方法的实例化对象
        // arguments 实际参数的集合
        if (arguments.length >= 1) {  //有参数就设置
            this.each(function (i, ele) {
                ele.innerText = con;
            })

            // for (var i = 0; i < this.eles.length; i++) {
            //     var ele = this.eles[i];
            //     ele.value = con;
            // }
        } else {  //没有参数就获取 (默认返回第一个)
            return this.eles[0].value;
        }
    }

    GetEle.prototype.each = function (fn) {
        // this -> 调用此方法的实例化对象
        // 遍历的是 实例化对象中的集合 this.eles
        for (var i = 0; i < this.eles.length; i++) {
            var ele = this.eles[i];  //循环的当前原始数据
            var index = i;   // 循环的当前下标

            // 遍历 集合 每次循环时执行传入的回调函数
            // fn(ele, index);   //传统 forEach
            fn(index, ele);     // jquery中第一个是下标,第二个是当前元素
        }
    }

    function $(selector) {   // 传一个css选择器 => 返回对应元素的实例化对象  
        return new GetEle(selector);
    }

    // console.log($("#tips"));
    // console.log($(".list li:nth-child(1)"));
    // console.log($(".list li:nth-child(2)"));

    $("#tips").html("heihei");
    $(".list li:nth-child(1)").html("1111111");
    $(".list li:nth-child(2)").html("2222222");
    $(".list li:nth-child(3)").html("333333");


    // console.log($(".list li"));  // {eles:[li,li,li]}
    // $(".list li").each(function (index, item) {
    //     console.log(item, index);
    // })

</script>

</html>